<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { bannerList, getDateTimeList, getHelp, getMaintenanceInfo } from '@/api/car';
import { RouteMap, useRouter } from '@/router';
import { useAuthStore } from '@/store/auth';
import { useCarCheckoutStore } from '@/store/carcheckout';
import { usePopupStore } from '@/store/popup';
import { useLocale } from '@/locale/locale';
import { isWechat } from '@/utils/platform';

const { t } = useLocale();
const popupStore = usePopupStore();
const carCheckoutStore = useCarCheckoutStore();
const authStore = useAuthStore();
const router = useRouter();
const maintenanceInfo = ref({
  isOpen: false,
  pickUpIsOpen: false,
  busServiceIsOpen: false,
  content: '',
  pickUpContent: '',
  busServiceContent: ''
});
const banner = ref([]);
const helpInfo = ref({
  image: '',
  content: ''
});
const type = ref('pickUp');
const serviceType = ref('pickUp');
const dateList = ref([]);
const timeList = ref([]);
const advanceOrderHour = ref(0);

const disabled = computed(() => {
  return (
    carCheckoutStore.airportInfo.id <= 0 ||
    carCheckoutStore.hotelInfo.id <= 0 ||
    !carCheckoutStore.bookDate ||
    carCheckoutStore.adultNumber <= 0
  );
});

async function checkMaintenance() {
  const res = await getMaintenanceInfo();
  if (res.code == 0) {
    maintenanceInfo.value.isOpen = parseInt(res.data.isOpen) == 1;
    maintenanceInfo.value.pickUpIsOpen = parseInt(res.data.pickUpIsOpen) == 1;
    maintenanceInfo.value.busServiceIsOpen = parseInt(res.data.busServiceIsOpen) == 1;
    maintenanceInfo.value.content = res.data.info ? res.data.info.content : '';
    maintenanceInfo.value.pickUpContent = res.data.pickUpInfo ? res.data.pickUpInfo.content : '';
    maintenanceInfo.value.busServiceContent = res.data.busServiceInfo
      ? res.data.busServiceInfo.content
      : '';

    if (parseInt(res.data.isOpen) == 2) {
      await getBannerList();
      await getHelpInfo();
      await getDateTimeInfo();
    }
  } else {
    uni.navigateBack();
    return;
  }
}

async function getBannerList() {
  const res = await bannerList();
  if (res.code == 0) {
    banner.value = res.data.list.map((item: any) => item.banner_image);
  }
}

async function getHelpInfo() {
  const res = await getHelp();
  if (res.code == 0) {
    helpInfo.value.image = res.data.info ? res.data.info.image : '';
    helpInfo.value.content = res.data.info ? res.data.info.content : '';
  }
}

async function getDateTimeInfo() {
  const res = await getDateTimeList();
  if (res.code == 0) {
    dateList.value = res.data.date_list;
    timeList.value = res.data.time_list;
    advanceOrderHour.value = res.data.advance_order_hour;
  }
}

function toOrder() {
  uni.showModal({
    title: t('LCKey_friendlyReminder'),
    content: t('TransfeMaintenanceMsg'),
    confirmText: t('tripChangeFeedbook'),
    confirmColor: '#576B95',
    success: function (res) {
      if (res.confirm) {
        if (authStore.isLoggedIn) {
          uni.navigateTo({
            url: '/pages/cs/cs'
          });
        } else {
          uni.navigateTo({
            url: '/pages/auth/login'
          });
        }
      } else if (res.cancel) {
      }
    }
  });
}

function toList() {
  if (disabled.value) {
    return false;
  }
  uni.navigateTo({
    url: '/pages/car/list'
  });
}

function changeType(tab: string) {
  type.value = tab;
}

function changeServiceType(tab: string) {
  serviceType.value = tab;
  carCheckoutStore.setServiceType(tab == 'pickUp' ? 'PICKUP' : 'DELIVERY');
}

function openPopup(type = 'carBookersNumberPicker') {
  if (type === 'carBookersNumberPicker') {
    popupStore.openCarBookersNumberPicker();
  } else if (type === 'carDatetimePicker') {
    popupStore.openCarDatetimePicker();
  } else if (type === 'carAirportPicker') {
    popupStore.openCarAirportPicker();
  } else if (type === 'carHotelPicker') {
    popupStore.openCarHotelPicker();
  }
}

function handleUpdateDate(date: string, time: string) {
  carCheckoutStore.setDateTime(date, time);
}

function handleUpdateAirport(id: number, name: string, address: string) {
  carCheckoutStore.setAirportInfo(id, name, address);
}

function handleUpdateHotel(id: number, name: string, address: string) {
  carCheckoutStore.setHotelInfo(id, name, address);
}

onMounted(() => {
  popupStore.init();
  checkMaintenance();
});
</script>

<template>
  <page-meta :page-style="`overflow: ${popupStore.isHidden ? 'hidden' : 'visible'}`"></page-meta>
  <view class="car-index-contain">
    <view class="car-index-contain-navbar">
      <uni-nav-bar
        v-if="isWechat()"
        :border="false"
        backgroundColor="none"
        fixed
        left-icon="left"
        status-bar
        @click-left="router.back"
      />
    </view>
    <view v-if="maintenanceInfo.isOpen" class="car-index-contain-maintenance">
      <uv-parse :content="maintenanceInfo.content"></uv-parse>
      <view class="car-index-contain-maintenance-bottom">
        <view @click="toOrder">{{ t('TransferBookNow') }}</view>
      </view>
    </view>

    <view v-if="!maintenanceInfo.isOpen" class="car-index-contain-view">
      <uv-swiper
        :autoplay="true"
        :circular="true"
        :list="banner"
        duration="300"
        easingFunction="easeInOutCubic"
        height="570rpx"
        interval="5000"
        keyName="bannerImage"
        radius="0"
      ></uv-swiper>
      <view class="car-index-contain-view-cont">
        <view class="car-index-contain-view-cont-center">
          <view v-if="type == 'pickUp'" class="car-index-contain-view-cont-center-top">
            <view class="car-index-contain-view-cont-center-top-l"></view>
            <view class="car-index-contain-view-cont-center-top-c">
              <image
                src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/bg_left.png"
              />
              <view class="car-index-contain-view-cont-center-top-c-v">
                <view class="car-index-contain-view-cont-center-top-c-v-t">
                  {{ t('OrderListTransfer') }}
                  <view></view>
                </view>
              </view>
            </view>
            <view
              class="car-index-contain-view-cont-center-top-r"
              @click="changeType('busService')"
            >
              {{ t('OrderListCharterCar') }}
            </view>
          </view>
          <view v-if="type == 'busService'" class="car-index-contain-view-cont-center-top">
            <view class="car-index-contain-view-cont-center-top-r" @click="changeType('pickUp')">
              {{ t('OrderListTransfer') }}
            </view>
            <view class="car-index-contain-view-cont-center-top-l"></view>
            <view class="car-index-contain-view-cont-center-top-c2">
              <image
                src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/bg_right.png"
              />
              <view class="car-index-contain-view-cont-center-top-c2-v">
                <view class="car-index-contain-view-cont-center-top-c2-v-t">
                  {{ t('OrderListCharterCar') }}
                  <view></view>
                </view>
              </view>
            </view>
          </view>

          <view v-if="type == 'pickUp'" class="car-index-contain-view-cont-center-pickup">
            <view
              v-if="maintenanceInfo.pickUpIsOpen"
              class="car-index-contain-view-cont-center-pickup-empty"
            >
              <uv-parse :content="maintenanceInfo.pickUpContent"></uv-parse>
            </view>
            <view v-else class="car-index-contain-view-cont-center-pickup-cont">
              <view class="car-index-contain-view-cont-center-pickup-cont-pick">
                <view
                  :class="serviceType == 'pickUp' ? 'active' : ''"
                  @click="changeServiceType('pickUp')"
                >
                  {{ t('TransferPickYou') }}
                </view>
                <view
                  :class="serviceType == 'delivery' ? 'active' : ''"
                  @click="changeServiceType('delivery')"
                >
                  {{ t('TransferTakeYou') }}
                </view>
              </view>
              <view
                v-if="serviceType == 'pickUp'"
                class="car-index-contain-view-cont-center-pickup-cont-pu"
              >
                <view
                  :class="carCheckoutStore.airportInfo.id > 0 ? '' : 'bg'"
                  class="car-index-contain-view-cont-center-pickup-cont-pu-item"
                  @click="openPopup('carAirportPicker')"
                >
                  <view class="car-index-contain-view-cont-center-pickup-cont-pu-item-l">
                    <image
                      src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_airport.png"
                    />
                    <view class="active">
                      {{
                        carCheckoutStore.airportInfo.id > 0
                          ? carCheckoutStore.airportInfo.showname
                          : t('TransferSelectLandingAirport')
                      }}
                    </view>
                  </view>
                  <image
                    v-if="carCheckoutStore.airportInfo.id > 0"
                    class="car-index-contain-view-cont-center-pickup-cont-pu-item-r"
                    src="/static/distribution/img3.png"
                  />
                </view>
                <view
                  :class="
                    carCheckoutStore.airportInfo.id > 0 && carCheckoutStore.hotelInfo.id <= 0
                      ? 'bg'
                      : ''
                  "
                  class="car-index-contain-view-cont-center-pickup-cont-pu-item"
                  @click="openPopup('carHotelPicker')"
                >
                  <view class="car-index-contain-view-cont-center-pickup-cont-pu-item-l">
                    <image
                      :src="
                        carCheckoutStore.airportInfo.id > 0 || carCheckoutStore.hotelInfo.id > 0
                          ? 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_location_active.png'
                          : 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_location.png'
                      "
                    />
                    <view
                      :class="
                        carCheckoutStore.airportInfo.id > 0 || carCheckoutStore.hotelInfo.id > 0
                          ? 'active'
                          : ''
                      "
                    >
                      {{
                        carCheckoutStore.hotelInfo.id > 0
                          ? carCheckoutStore.hotelInfo.showname
                          : t('TransferSelectDestination')
                      }}
                    </view>
                  </view>
                  <image
                    v-if="carCheckoutStore.hotelInfo.id > 0"
                    class="car-index-contain-view-cont-center-pickup-cont-pu-item-r"
                    src="/static/distribution/img3.png"
                  />
                </view>
                <view
                  :class="
                    carCheckoutStore.airportInfo.id > 0 &&
                    carCheckoutStore.hotelInfo.id > 0 &&
                    !carCheckoutStore.bookDate
                      ? 'bg'
                      : ''
                  "
                  class="car-index-contain-view-cont-center-pickup-cont-pu-item"
                  @click="openPopup('carDatetimePicker')"
                >
                  <view class="car-index-contain-view-cont-center-pickup-cont-pu-item-l">
                    <image
                      :src="
                        (carCheckoutStore.airportInfo.id > 0 &&
                          carCheckoutStore.hotelInfo.id > 0) ||
                        carCheckoutStore.bookDate
                          ? 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_time_active.png'
                          : 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_time.png'
                      "
                    />
                    <view
                      :class="
                        (carCheckoutStore.airportInfo.id > 0 &&
                          carCheckoutStore.hotelInfo.id > 0) ||
                        carCheckoutStore.bookDate
                          ? 'active'
                          : ''
                      "
                    >
                      {{
                        carCheckoutStore.bookDate
                          ? carCheckoutStore.bookDateTime
                          : t('TransferSelectPiclTime')
                      }}
                    </view>
                  </view>
                  <image
                    v-if="carCheckoutStore.bookDate"
                    class="car-index-contain-view-cont-center-pickup-cont-pu-item-r"
                    src="/static/distribution/img3.png"
                  />
                </view>
                <view
                  class="car-index-contain-view-cont-center-pickup-cont-pu-item"
                  @click="openPopup('carBookersNumberPicker')"
                >
                  <view class="car-index-contain-view-cont-center-pickup-cont-pu-item-l">
                    <image
                      src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_people.png"
                    />
                    <view>
                      <text>
                        {{ carCheckoutStore.adultNumber }} {{ t('LHKey_selectRoomAdult') }}
                      </text>
                      <text>
                        {{ carCheckoutStore.childrenNumber }} {{ t('LHKey_selectRoomChildren') }}
                        <text>{{ t('TransferPersonUnder12') }}</text>
                      </text>
                    </view>
                  </view>
                  <image
                    class="car-index-contain-view-cont-center-pickup-cont-pu-item-r"
                    src="/static/distribution/img3.png"
                  />
                </view>
              </view>

              <view
                v-if="serviceType == 'delivery'"
                class="car-index-contain-view-cont-center-pickup-cont-pu"
              >
                <view
                  :class="carCheckoutStore.hotelInfo.id > 0 ? '' : 'bg'"
                  class="car-index-contain-view-cont-center-pickup-cont-pu-item"
                  @click="openPopup('carHotelPicker')"
                >
                  <view class="car-index-contain-view-cont-center-pickup-cont-pu-item-l">
                    <image
                      src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_location_active.png"
                    />
                    <view class="active">
                      {{
                        carCheckoutStore.hotelInfo.id > 0
                          ? carCheckoutStore.hotelInfo.showname
                          : t('TransferSelectStartDestination')
                      }}
                    </view>
                  </view>
                  <image
                    v-if="carCheckoutStore.hotelInfo.id > 0"
                    class="car-index-contain-view-cont-center-pickup-cont-pu-item-r"
                    src="/static/distribution/img3.png"
                  />
                </view>

                <view
                  :class="
                    carCheckoutStore.hotelInfo.id > 0 && carCheckoutStore.airportInfo.id <= 0
                      ? 'bg'
                      : ''
                  "
                  class="car-index-contain-view-cont-center-pickup-cont-pu-item"
                  @click="openPopup('carAirportPicker')"
                >
                  <view class="car-index-contain-view-cont-center-pickup-cont-pu-item-l">
                    <image
                      :src="
                        carCheckoutStore.hotelInfo.id > 0 || carCheckoutStore.airportInfo.id > 0
                          ? 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_airport.png'
                          : '/static/car/icon_airport_noactive.png'
                      "
                    />

                    <view
                      :class="
                        carCheckoutStore.hotelInfo.id > 0 || carCheckoutStore.airportInfo.id > 0
                          ? 'active'
                          : ''
                      "
                    >
                      {{
                        carCheckoutStore.airportInfo.id > 0
                          ? carCheckoutStore.airportInfo.showname
                          : t('TransferSelectDepartureAirport')
                      }}
                    </view>
                  </view>
                  <image
                    v-if="carCheckoutStore.airportInfo.id > 0"
                    class="car-index-contain-view-cont-center-pickup-cont-pu-item-r"
                    src="/static/distribution/img3.png"
                  />
                </view>

                <view
                  :class="
                    carCheckoutStore.airportInfo.id > 0 &&
                    carCheckoutStore.hotelInfo.id > 0 &&
                    !carCheckoutStore.bookDate
                      ? 'bg'
                      : ''
                  "
                  class="car-index-contain-view-cont-center-pickup-cont-pu-item"
                  style="flex-direction: column; align-items: flex-start"
                  @click="openPopup('carDatetimePicker')"
                >
                  <view class="car-index-contain-view-cont-center-pickup-cont-pu-item-top">
                    <view class="car-index-contain-view-cont-center-pickup-cont-pu-item-l">
                      <image
                        :src="
                          (carCheckoutStore.airportInfo.id > 0 &&
                            carCheckoutStore.hotelInfo.id > 0) ||
                          carCheckoutStore.bookDate
                            ? 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_time_active.png'
                            : 'https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_time.png'
                        "
                      />
                      <view
                        :class="
                          (carCheckoutStore.airportInfo.id > 0 &&
                            carCheckoutStore.hotelInfo.id > 0) ||
                          carCheckoutStore.bookDate
                            ? 'active'
                            : ''
                        "
                      >
                        {{
                          carCheckoutStore.bookDate
                            ? carCheckoutStore.bookDateTime
                            : t('TransferSelectDeliveryTime')
                        }}
                      </view>
                    </view>
                    <image
                      v-if="carCheckoutStore.bookDate"
                      class="car-index-contain-view-cont-center-pickup-cont-pu-item-r"
                      src="/static/distribution/img3.png"
                    />
                  </view>
                  <view class="car-index-contain-view-cont-center-pickup-cont-pu-item-bottom">
                    {{ t('TransferAirPortMsg') }}
                  </view>
                </view>
                <view
                  class="car-index-contain-view-cont-center-pickup-cont-pu-item"
                  @click="openPopup('carBookersNumberPicker')"
                >
                  <view class="car-index-contain-view-cont-center-pickup-cont-pu-item-l">
                    <image
                      src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_people.png"
                    />
                    <view>
                      <text>
                        {{ carCheckoutStore.adultNumber }} {{ t('LHKey_selectRoomAdult') }}
                      </text>
                      <text>
                        {{ carCheckoutStore.childrenNumber }} {{ t('LHKey_selectRoomChildren') }}
                        <text>{{ t('TransferPersonUnder12') }}</text>
                      </text>
                    </view>
                  </view>
                  <image
                    class="car-index-contain-view-cont-center-pickup-cont-pu-item-r"
                    src="/static/distribution/img3.png"
                  />
                </view>
              </view>
              <view
                :class="disabled ? 'disabled' : ''"
                class="car-index-contain-view-cont-center-pickup-cont-pu-btn"
                @click="toList"
              >
                {{ t('TransferChooseCar') }}
              </view>
            </view>
          </view>
          <view v-if="type == 'busService'" class="car-index-contain-view-cont-center-busService">
            <view
              v-if="maintenanceInfo.busServiceIsOpen"
              class="car-index-contain-view-cont-center-busService-empty"
            >
              <uv-parse :content="maintenanceInfo.busServiceContent"></uv-parse>
            </view>
          </view>

          <view
            class="car-index-contain-view-cont-center-help"
            @click="router.to(RouteMap.carHelp)"
          >
            <image :src="helpInfo.image" />
          </view>
        </view>
      </view>
    </view>

    <view v-if="!maintenanceInfo.isOpen" class="car-index-contain-bottom">
      <view class="car-index-contain-bottom-tab active">
        <image
          src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_tab1_active.png"
        />
        {{ t('TransferCarHome') }}
      </view>
      <view class="car-index-contain-bottom-line"></view>
      <view
        class="car-index-contain-bottom-tab"
        @click="
          router.to(RouteMap.trips, {
            tab: 'car'
          })
        "
      >
        <image src="https://apt11-1251002327.cos.ap-tokyo.myqcloud.com/miniapp/car/icon_tab2.png" />
        {{ t('DiningMyReservations') }}
      </view>
    </view>
  </view>

  <apt-car-bookers-number-picker
    :adults-number="carCheckoutStore.adultNumber"
    :children-number="carCheckoutStore.childrenNumber"
    @update="carCheckoutStore.setBookersNumber"
  />

  <apt-car-airport-picker :id="carCheckoutStore.airportInfo.id" @update="handleUpdateAirport" />

  <apt-car-hotel-picker
    :id="carCheckoutStore.hotelInfo.id"
    :service-type="serviceType"
    @update="handleUpdateHotel"
  />

  <apt-car-datetime-picker
    :date="carCheckoutStore.bookDate"
    :date-list="dateList"
    :service-type="serviceType"
    :time="carCheckoutStore.bookTime"
    :time-list="timeList"
    :advance-order-hour="advanceOrderHour"
    @update="handleUpdateDate"
  />
</template>

<style lang="scss" scoped>
.car-index {
  &-contain {
    padding-bottom: 120rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);

    &-navbar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }

    &-maintenance {
      padding-bottom: 110rpx;
      padding-bottom: calc(110rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(110rpx + env(safe-area-inset-bottom));

      &-bottom {
        background: #ffffff;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding-top: 30rpx;
        padding-bottom: 30rpx;
        padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(30rpx + env(safe-area-inset-bottom));

        view {
          margin: 0 24rpx;
          background: #269c74;
          height: 76rpx;
          border-radius: 20rpx;
          line-height: 76rpx;
          text-align: center;
          font-weight: 500;
          font-size: 30rpx;
          color: #ffffff;
        }
      }
    }

    &-view {
      &-cont {
        position: relative;
        top: -84rpx;
        margin: 0 24rpx;

        &-center {
          &-top {
            position: relative;
            height: 84rpx;
            line-height: 84rpx;
            background: rgba(255, 255, 255, 0.7);
            display: flex;
            border-top-left-radius: 20rpx;
            border-top-right-radius: 20rpx;

            &-l {
              width: 380rpx;
            }

            &-c {
              position: absolute;
              left: 0;
              bottom: 0;

              image {
                display: block;
                width: 380rpx;
                height: 96rpx;
              }

              &-v {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                display: flex;

                &-t {
                  height: 96rpx;
                  line-height: 96rpx;
                  margin-left: 124rpx;
                  font-weight: 500;
                  font-size: 32rpx;
                  color: #ec1d39;
                  position: relative;

                  view {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    height: 4rpx;
                    border-radius: 4rpx;
                    background: linear-gradient(90deg, #ec1d39 0%, #ff5f5f 100%);
                  }
                }
              }
            }

            &-c2 {
              position: absolute;
              right: 0;
              bottom: 0;

              image {
                display: block;
                width: 380rpx;
                height: 96rpx;
              }

              &-v {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                display: flex;

                &-t {
                  height: 96rpx;
                  line-height: 96rpx;
                  margin-left: 160rpx;
                  font-weight: 500;
                  font-size: 32rpx;
                  color: #ec1d39;
                  position: relative;

                  view {
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    right: 0;
                    height: 4rpx;
                    border-radius: 4rpx;
                    background: linear-gradient(90deg, #ec1d39 0%, #ff5f5f 100%);
                  }
                }
              }
            }

            &-r {
              flex: 1;
              text-align: center;
              font-weight: 500;
              font-size: 32rpx;
              color: #3d3d3d;
            }
          }

          &-pickup {
            padding: 34rpx 32rpx 38rpx;
            background: #ffffff;
            border-bottom-left-radius: 20rpx;
            border-bottom-right-radius: 20rpx;

            &-cont {
              &-pick {
                background: #f8f5f5;
                border-radius: 8rpx;
                display: flex;
                padding: 8rpx;

                view {
                  width: 50%;
                  height: 52rpx;
                  line-height: 52rpx;
                  text-align: center;
                  border-radius: 8rpx;
                  font-weight: 500;
                  font-size: 24rpx;
                  color: #3d3d3d;

                  &.active {
                    background: #ffffff;
                  }
                }
              }

              &-pu {
                margin-top: 36rpx;

                &-item {
                  margin-bottom: 20rpx;
                  padding: 30rpx 32rpx;
                  border-radius: 8rpx;

                  &.bg {
                    background: #f9f6f6;
                  }

                  display: flex;
                  align-items: center;
                  justify-content: space-between;

                  &-top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                  }

                  &-bottom {
                    margin-left: 56rpx;
                    margin-top: 16rpx;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #8c8c8c;
                    line-height: 34rpx;
                  }

                  &-l {
                    display: flex;
                    align-items: center;

                    image {
                      display: block;
                      width: 40rpx;
                      height: 40rpx;
                      margin-right: 16rpx;
                    }

                    view {
                      font-weight: 500;
                      font-size: 36rpx;
                      color: #d8d8d8;
                      line-height: 50rpx;

                      &.active {
                        color: #3d3d3d;
                      }

                      text {
                        font-weight: 500;
                        font-size: 36rpx;
                        color: #3d3d3d;
                        line-height: 50rpx;

                        &:first-child {
                          margin-right: 40rpx;
                        }

                        &:last-child {
                          text {
                            font-size: 24rpx;
                          }
                        }
                      }
                    }
                  }

                  &-r {
                    display: block;
                    width: 48rpx;
                    height: 48rpx;
                  }
                }

                &-btn {
                  margin-top: 12rpx;
                  height: 80rpx;
                  line-height: 80rpx;
                  border-radius: 8rpx;
                  text-align: center;
                  background: #ff5a60;
                  font-weight: 500;
                  font-size: 36rpx;
                  color: #ffffff;

                  &.disabled {
                    background: rgba(255, 90, 96, 0.5);
                  }
                }
              }
            }
          }

          &-busService {
            padding: 34rpx 32rpx 38rpx;
            background: #ffffff;
            border-bottom-left-radius: 20rpx;
            border-bottom-right-radius: 20rpx;
          }

          &-help {
            display: block;
            width: 100%;
            height: 174rpx;
            margin-top: 20rpx;

            image {
              display: block;
              width: 100%;
              height: 174rpx;
            }
          }
        }
      }
    }

    &-bottom {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(99, 99, 99, 0.2);
      background: #ffffff;
      padding-top: 24rpx;
      padding-bottom: 24rpx;
      padding-bottom: calc(constant(safe-area-inset-bottom) + 24rpx);
      padding-bottom: calc(env(safe-area-inset-bottom) + 24rpx);
      display: flex;
      align-items: center;

      &-tab {
        width: calc((100% - 1px) / 2);
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 500;
        font-size: 28rpx;
        color: #adaeb0;
        line-height: 40rpx;

        &.active {
          color: #ec1d39;
        }

        image {
          display: block;
          width: 48rpx;
          height: 48rpx;
          margin-right: 8rpx;
        }
      }

      &-line {
        width: 1px;
        height: 56rpx;
        background: #ededed;
      }
    }
  }
}
</style>
